<template>
	<view :style="{ '--color': vuex_config.adminTheme, '--price': vuex_config.adminPrice }">
		<view class="search">
			<u-search @search="search" @clear="search" clearabled :show-action="false" shape="square"
				style="width: 90%;" height="64" v-model="searchName"></u-search>
			<view class="iconfont iconfont-e639 " style="color: #3297ef;font-size: 56rpx" @click="openScan"></view>
		</view>
		<u-tabs :active-color="vuex_config.adminTheme" :inactive-color="vuex_config.adminTheme" :list="tabList"
			:current="current" @change="change"></u-tabs>
		<view class="order_list">
			<view class="order_item" v-for="(item, index) in dataList" :key="index">
				<view class="title_main" @click="openDetail(item)">
					<view class="title_l">
						<view class="sign"></view>
						<view class="order_no">订单编码：{{ item.order_no }}</view>
					</view>
					<view class="title_state">{{ statusFilter(item, 1) }}</view>
				</view>
				<view class="cont_main">
					<view class="order_cont" @click="openDetail(item)">
						<view class="basic_item">
							<view class="basic_l">联系人：</view>
							<view class="basic_r">{{ item.name }}</view>
						</view>
						<view class="basic_item">
							<view class="basic_l">手机号：</view>
							<view class="basic_r">{{ item.mobile }}</view>
						</view>
						<view class="basic_item">
							<view class="basic_l">收货地址：</view>
							<view class="basic_r">{{ item.address }}</view>
						</view>
						<view class="basic_item">
							<view class="basic_l">下单时间：</view>
							<view class="basic_r">{{ item.date_creation | formTime() }}</view>
						</view>
					</view>
					<view class="bot_main">
						<view class="sum_box">
							<view class="sum sum_l">共{{ item.num }}件商品</view>
							<view class="sum">合计：</view>
							<view class="num">￥{{ item.total_amount }}</view>
						</view>
						<view class="btn_s">
							<view class="btn" v-if="item.pay_status == 1" @click="openRefund(item)">退款申请</view>
							<view class="btn" v-if="checkBtn(item, 2)" @click="goDeliver(item)">
								{{ item.pay_status == 1 ? '订单发货' : '修改发货' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams"></sww-load-more>
		<u-modal v-model="show" :show-cancel-button="true" title="申请退款" @confirm="confirmRefund">
			<view class="refund-box">
				<u-field v-model="refundForm.money" label="退款金额" placeholder="请输入退款金额">
				</u-field>
				<view class="u-font-24 tip">注:最多可退款<text class="price">{{currentOrderItem.total_amount}}</text>元</view>
				<u-field v-model="refundForm.content" label="备注信息" placeholder="请输入备注信息">
				</u-field>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		orderjs
	} from '../../mixins/business.js';
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js';
	import {
		wxScanCode
	} from '@/utils/uniPromise.js'
	export default {
		mixins: [pagingMixin, orderjs],
		data() {
			return {
				tabList: [{
					name: '待发货',
					type: 1
				}, {
					name: '已发货',
					type: 4
				}, {
					name: '退款中',
					type: 2
				}, {
					name: '已完成',
					type: 10
				}],
				type: ''
			};
		},
		onLoad(otions) {
			this.type = otions.type
			this.initPage();
		},
		methods: {
			openDetail(item) {
				this.$linkTo(
					`/package/orderSystem/business/product/edit/index?order_no=${item.order_no}&order_id=${item.pk_id}`
					);
			},
			openScan() {
				wxScanCode().then(res => {
					this.searchName = res.result
					this.search()
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $www-theme-bg;
	}
</style>
<style scoped lang="scss">
	.search {
		padding: 16rpx 30rpx;
		border-top: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
	}

	/deep/ .u-scroll-box {
		display: flex;
	}

	/deep/.u-model__title {
		padding: 20rpx 0 !important;
		border-bottom: 1px solid #eeeeee;
	}

	.refund-box {
		.tip {
			padding: 20rpx 0;
			margin-left: 160rpx;
			color: #999;
		}

		.price {
			color: var(--price);
		}
	}

	.order_list {
		padding-bottom: 20rpx;
	}

	.order_item {
		margin: 20rpx 20rpx 0;
		overflow: hidden;
		border-radius: 10rpx;
		background-color: #fff;

		.title_main {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding-right: 22rpx;

			.title_l {
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;

				.sign {
					width: 10rpx;
					height: 28rpx;
					margin-right: 10rpx;
					background-color: var(--color);
				}

				.order_no {
					font-weight: bold;
					color: #222;
					font-size: 30rpx;
				}
			}

			.title_state {
				color: var(--color);
			}
		}

		.cont_main {
			padding: 0 20rpx;

			.order_cont {
				border-top: 1px solid #f5f5f5;
				border-bottom: 1px solid #f5f5f5;
				padding: 20rpx 0 6rpx;
			}
		}

		.basic_item {
			margin-bottom: 16rpx;
			display: flex;
			line-height: 36rpx;

			.basic_r {
				flex: 1;
				overflow: hidden;
			}
		}

		.bot_main {
			display: flex;
			align-items: center;
			height: 96rpx;

			.sum_box {
				flex: 1;
				overflow: hidden;
				display: flex;
				align-items: center;

				.sum {
					color: #999999;
					font-size: 28rpx;
				}

				.sum_l {
					margin-right: 20rpx;
				}

				.num {
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					color: var(--price);
				}
			}

			.btn_s {
				display: flex;
				align-items: center;

				.btn {
					border: var(--color);
					color: var(--color);
					margin-right: 14rpx;
					line-height: 46rpx;
					width: 140rpx;
					text-align: center;
					border: 1px solid var(--color);
					border-radius: 8rpx;
					overflow: hidden;
					font-size: 28rpx;

					&:last-of-type {
						margin-right: 0;
						background-color: var(--color);
						color: #fff;
					}
				}
			}
		}
	}
</style>
